<template>
  <div class="main">
    <!-- <div>搜索框</div> -->
    <el-form>
      <el-form-item>
        <el-input v-model.trim="inputValue" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handleClick">查询</el-button>
    </el-form>

    <Table :list='courseList' :deleteHandle="deleteHandle" :editClick='editClick'/>
    <!-- <div>分页</div> -->
    <Pagination :currentChange="currentChange"></Pagination>

  </div>
  <EditPop :popShow="popShow" v-if='popShow' :message='courseItemState.message' 
    :confirmClick='confirmClick' />  
</template>
<script setup>
import Table from './Table.vue'
import EditPop from './EditPop.vue'
import Pagination from './Pagination.vue'
import { reactive,ref,onMounted } from 'vue'
import { getCourse,changeCourse,deleteCourse } from '../api/index';
import emitter from '../utils/eventBus'
/**
 * 编辑的逻辑
 */
//编辑的数据
const courseItemState = reactive({
  message: {}
})
//课程修改接口调用
const changeCourseData = async (query) => {
  const { title, price, id } = query
  const res = await changeCourse({ title, price, id })
  if (res?.message) {
    ElMessage({
      message: res.message,
      type: 'success'
    })
  }
}

//控制编辑弹窗的展示变量
const popShow = ref(false)
//控制编辑弹窗的展示方法
const isShowPop = (show) => {
  console.log(show,"显示弹出")
  popShow.value = show
}
//编辑的按钮
const editClick = (val) => {
  isShowPop(true)
  courseItemState.message = val
}
//取消和确认按钮逻辑
const confirmClick = (val) => {
  if (val === 'cancel') {
    isShowPop(false)
  } else if (
    val.title !== courseItemState.message.title 
    || 
    val.price !== courseItemState.message.price) {
    //更改对应课程的title或者price
    data.list.map((item) => {
      if (item.id === val.id) {
        item.title = val.title
        item.price = val.price
      }
    })
    //关闭弹窗
    isShowPop(false)
    //修改接口的调用
    changeCourseData({ title: val.title, price: val.price, id: val.id })
  } else {
    ElMessage({
      showClose: true,
      message: '没发现有更改的内容',
      type: 'warning'
    })
  }
}

//删除的接口
const deleteCoureData = async (query) => {
  const res = await deleteCourse({ id: query })
  if (res?.message) {
    ElMessage({
      message: res.message,
      type: 'success'
    })
  }
  //当前也的数据清零时，重置到第一页
  if (data.list.length === 0 && data.page > 1) {
    getCourseData({ category: data.sideCategory, page: 1 })
  }
}
/**
 * 课程删除的逻辑
 */
 const deleteHandle = (val) => {
  if (val) {
//通过 filter 方法过滤掉 id 等于 val 的项，
// 重新赋值给 data.list，实现删除效果。    
    data.list = data.list.filter((item) => {
      return item.id !== val
    })
    //删除接口的调用
    deleteCoureData(val)
  }
}


/**
 * 搜索框的逻辑
 */
const inputValue = ref('')
//搜索的逻辑，
const courseList = computed(() => {
  return data.list?.filter((item) => {
    return item.title.indexOf(inputValue.value) >= 0
  })
})
//搜索的按钮
const handleClick = () => {
  if (inputValue.value) {
    ElMessage({
      message: '查询成功',
      type: 'success'
    })
  } else {
    ElMessage({
      message: '请输入搜索内容',
      type: 'error'
    })
  }
}

/**
 * 初始化的数据
 */
const data = reactive({
  list: [
    {
      category: "front",
      courseImg: "https://file.xdclass.net/video/2022/77-QD/cover.jpeg",
      del: 0,
      id: 1,
      point: 9.8,
      price: "99",
      title: "22年新版【前端高级工程师】面试专题第一季"
    },
    {
      category: "front",
      courseImg: "https://file.xdclass.net/video/2022/75-Vue3/cover1.jpeg",
      del: 0,
      id: 2,
      point: 9.5,
      price: "99",
      title: "22年新版-零基础玩转vue3+开发仿美团外卖项目vue视频"
    },
    {
      category: "front",
      courseImg: "https://file.xdclass.net/video/2022/76-webpack5/cover.jpeg",
      del: 0,
      id: 3,
      point: 9.3,
      price: "59",
      title: "新版webpack5丨带你玩转时下最流行的构建工具"
    },
    {
      category: "front",
      courseImg: "https://file.xdclass.net/video/2021/74-git/WechatIMG3026.jpeg",
      del: 0,
      id: 4,
      point: 9.2,
      price: "39",
      title: "22年新版-玩转Git零基础到进阶实战 git视频急速入门"
    },
    {
      category: "front",
      courseImg: "https://file.xdclass.net/video/2021/73-ES6/cover.jpeg",
      del: 0,
      id: 5,
      point: 9.4,
      price: "49",
      title: "22年新版-玩转ECMAScript6零基础到进阶实战es6视频"
    },
  ],
  page: 1,//默认展示第一页
  total: 15, //课程总数  
  sideCategory: 'front' //课程的分类  
})
/**
* 课程列表数据获取和课程类目切换逻辑
*/
const getCourseData = async (query) => {
  //课程分类
  const category = query?.category || data.sideCategory
  const page = query?.page || 1
  const size = query?.size || 5
  const res = await getCourse({ category, page, size })
  //筛选符合分类的课程
  data.list = res?.list.filter((item) => (item.category === category))
  data.total = res.total
}
onMounted(() => {
  getCourseData()
  // 监听课程类目tab切换
  emitter.on('course', (val) => {
    data.sideCategory = val
    data.page = 1
    getCourseData({ category: val, page: 1 })
  })
})

/**
 * 分页的逻辑
 */
 const currentChange = (val) => {
  if (val === 'pre') {
    if (data.page > 1) {
      data.page--
    } else {
      ElMessage({
        message: '已经是第一页了！！！',
        type: 'warning',
        showClose: true
      })
    }
  }
  if (val === 'next') {
    if (data.page < Math.ceil(data.total / 5)) {
      data.page++
    } else {
      ElMessage({
        message: '已经是最后一页了！！！',
        type: 'warning',
        showClose: true
      })
    }
  }
  //请求课程的接口
  getCourseData({ category: data.sideCategory, page: data.page })  
}
</script>

<style lang='less' scoped>
.el-form {
  display: flex;
}

.main {
  background-color: #fff;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;

  .input-with-select {
    width: 400px;
    margin-bottom: 40px;
  }
}

:deep(.el-table__header-wrapper) {
  position: fixed;
  z-index: 20;
}

:deep(.el-table__inner-wrapper) {
  overflow: hidden;
}

:deep(.el-table__body-wrapper) {
  margin-top: 40px;
}

:deep(.el-input__inner) {
  width: 300px;
  margin-right: 10px;
}

:deep(.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9) !important;
  height: 140px !important;
}

.table {
  height: 80vh;
  width: 85vw;
  overflow: hidden;
  overflow-y: scroll;
}

.table::-webkit-scrollbar {
  display: none
}
</style>